<template>
  <el-card shadow="hover" style="margin:20px 0">
    <div slot="header">
      <el-row type="flex" align="middle">
        <el-col :span="16" :style="{textAlign:'left',paddingLeft:'0.25em'}">
          <span :style="{fontWeight:'bold',color:'#2c3e50'}">{{title}}</span>
        </el-col>
        <el-col :span="8" :style="{textAlign:'right'}">
          <el-tooltip class="item" effect="dark" content="插入图表" placement="top">
            <el-button
              circle
              plain
              size="mini"
              type="success"
              icon="el-icon-plus"
              @click="showCreate = true"
            ></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="修改图表" placement="top">
            <el-button
              circle
              plain
              size="mini"
              type="warning"
              icon="el-icon-more"
              @click="showModify = true"
            ></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除图表" placement="top">
            <el-button
              circle
              plain
              size="mini"
              type="danger"
              icon="el-icon-close"
              @click="handleRemove"
            ></el-button>
          </el-tooltip>
        </el-col>
      </el-row>
    </div>
    <div v-if="src&&cfg">
      <bar-view v-if="type=='histogram'" :source="src" :config="cfg" />
      <bar-view v-if="type=='bar'" :source="src" :config="cfg" />
      <bar-view v-if="type=='line'" :source="src" :config="cfg" />
      <bar-view v-if="type=='scatter'" :source="src" :config="cfg" />
      <pie-view v-if="type=='pie'" :source="src" :config="cfg" />
      <pie-view v-if="type=='pieRose'" :source="src" :config="cfg" />
      <pie-view v-if="type=='ring'" :source="src" :config="cfg" />
      <pie-view v-if="type=='ringRose'" :source="src" :config="cfg" />
      <pie-view v-if="type=='waterfall'" :source="src" :config="cfg" />
      <config-view
        v-if="showModify"
        :show="showModify"
        :config="config"
        @close="showModify=false"
        @submit="handleModify"
      />
      <config-view
        v-if="showCreate"
        :show="showCreate"
        @close="showCreate=false"
        @submit="handleCreate"
      />
    </div>
  </el-card>
</template>
<script>
import BarView from "./BarView";
import PieView from "./PieView";
import ConfigView from "./ConfigView";
import {getDateRanges} from "@/utils/date.js";

export default {
  props: ["source", "config", "index"],
  components: {
    BarView,
    PieView,
    ConfigView
  },
  data() {
    return {
      showModify: false,
      showCreate: false,
      editorConfig: null
    };
  },
  computed: {
    title() {
      return this.config.title;
    },
    type() {
      return this.config.type;
    },
    src() {
      return this.source;
    },
    cfg() {
      return {
        timeRange: this.getDateRanges(this.config.timeConfig),
        filter: this.config.filter,
        keyword: this.config.keyword,
        type: this.config.type,
        title: this.config.title,
        summary: this.config.summary,
        reverse: this.config.reverse
      };
    }
  },
  methods: {
    getDateRanges,
    handleRemove() {
      this.$emit("remove", this.index);
    },
    handleCreate(config) {
      this.showCreate = false;
      this.$emit("create", { index: this.index, config: config });
    },
    handleModify(config) {
      this.showModify = false;
      this.$emit("modify", { index: this.index, config: config });
    },
  //   getDateRanges(conf) {
  //     // Config for time range.
  //     let type = conf.type;
  //     let start = conf.start;
  //     let count = conf.count;
  //     let list = conf.list;
  //     let range = [];
  //     if (!start) start = new Date().getTime();
  //     // First element of time range.
  //     let s = new Date(start + 24 * 3600000);
  //     s.setHours(0);
  //     s.setMinutes(0);
  //     s.setSeconds(0);
  //     range.push(s.getTime());
  //     s.setTime(start);
  //     if (type == "PerMonth") {
  //       for (let i = 0; i < count; i++) {
  //         s.setDate(1);
  //         s.setHours(0);
  //         s.setMinutes(0);
  //         s.setSeconds(0);
  //         range.push(s.getTime());
  //         s.setTime(s.getTime() - 48 * 3600000);
  //       }
  //     } else if (type == "PerSeason") {
  //       for (let i = 0; i < count; i++) {
  //         if (s.getMonth() >= 0 && s.getMonth() <= 2) s.setMonth(0);
  //         else if (s.getMonth() >= 3 && s.getMonth() <= 5) s.setMonth(3);
  //         else if (s.getMonth() >= 6 && s.getMonth() <= 8) s.setMonth(6);
  //         else s.setMonth(9);
  //         s.setDate(1);
  //         s.setHours(0);
  //         s.setMinutes(0);
  //         s.setSeconds(0);
  //         range.push(s.getTime());
  //         s.setTime(s.getTime() - 48 * 3600000);
  //       }
  //     } else if (type == "PerHalf") {
  //       for (let i = 0; i < count; i++) {
  //         if (s.getMonth() >= 0 && s.getMonth() <= 5) s.setMonth(0);
  //         else s.setMonth(6);

  //         s.setDate(1);
  //         s.setHours(0);
  //         s.setMinutes(0);
  //         s.setSeconds(0);
  //         range.push(s.getTime());
  //         s.setTime(s.getTime() - 48 * 3600000);
  //       }
  //     } else if (type == "PerYear") {
  //       for (let i = 0; i < count; i++) {
  //         s.setMonth(0);
  //         s.setDate(1);
  //         s.setHours(0);
  //         s.setMinutes(0);
  //         s.setSeconds(0);
  //         range.push(s.getTime());
  //         s.setTime(s.getTime() - 48 * 3600000);
  //       }
  //     } else if (type == "Per30Days") {
  //       for (let i = 0; i < count; i++) {
  //         s.setTime(s.getTime() - 24 * 3600000 * 30);
  //         range.push(s.getTime());
  //       }
  //     } else if (type == "Per90Days") {
  //       s.setTime(s.getTime() - 24 * 3600000 * 90);
  //       range.push(s.getTime());
  //     } else if (type == "Per180Days") {
  //       s.setTime(s.getTime() - 24 * 3600000 * 180);
  //       range.push(s.getTime());
  //     } else if (type == "Per365Days") {
  //       s.setTime(s.getTime() - 24 * 3600000 * 365);
  //       range.push(s.getTime());
  //     } else if (type == "CustomList") {
  //       range = [];
  //       for (let i = 0; i < list.length; i++) {
  //         let str =
  //           list[i].substr(0, 4) +
  //           "/" +
  //           list[i].substr(3, 2) +
  //           "/" +
  //           list[i].substr(5, 2) +
  //           " 00:00:00";
  //         let d = new Date(str);
  //         range.push(d.getTime());
  //       }
  //     }
  //     console.log(range);
  //     return range;
  //   }
  }
};
</script>